<template>
    <div class="CeremonyHall  h100" v-loading="loading">
      <div class="PageContent">
        <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
          <el-row :gutter="5" class="fileSearch">
            <el-form-item label="业务编码:">
              <el-input v-model="ruleForm.businessCode"></el-input>
            </el-form-item>
            <el-form-item label="逝者姓名:" >
              <el-input v-model="ruleForm.deadName"></el-input>
            </el-form-item>
            <el-form-item label="礼厅分类:" >
              <el-select v-model="ruleForm.businessType" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item) in dictionary"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="用厅日期:" >
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentTimeStart"   format="yyyy-MM-dd" ></el-date-picker>-
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentTimeEnd"   format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-if="btnRight.btnCeremonyHallSearch" @click="onSubmit('search')">查询</el-button>
              <el-button type="primary" plain v-if="btnRight.btnCeremonyHallExport" @click="openExecl">导出Excel</el-button>
            </el-form-item>
          </el-row>
          <el-table
            :data="tableData"
            border
            :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
            stripe
            :height="tableHeight">
            <el-table-column sortable align = 'center'  prop="businessCode"  label="业务编码"  width="200">
            </el-table-column>
            <el-table-column
              prop="deadName"
              align = 'center'
              label="逝者姓名"
              width="150">
            </el-table-column>
            <el-table-column
              prop="deadGender"
              align = 'center'
              label="逝者性别"
              width="120">
            </el-table-column>
            <el-table-column
              prop="deadAge"
              align = 'center'
              label="年龄"
              width="100">
            </el-table-column>
            <el-table-column
              prop="certificateNo"
              align = 'center'
              label="逝者证件号码"
              width="200">
            </el-table-column>
            <el-table-column
              prop="businessType"
              align = 'center'
              label="礼厅分类"
              width="120">
            </el-table-column>
            <el-table-column
              prop="hallType"
              align = 'center'
              label="礼厅类型"
              width="150">
            </el-table-column>
            <el-table-column
              prop="hallCode"
              align = 'center'
              label="礼厅编号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="hallName"
              align = 'center'
              label="礼厅名称"
              width="150">
            </el-table-column>
            <el-table-column
              prop="processState"
              align = 'center'
              label="礼厅状态"
              width="100">
            </el-table-column>
            <el-table-column
              prop="appointmentInTime"
              align = 'center'
              label="入厅时间"
              width="200">
            </el-table-column>
            <el-table-column
              prop="appointmentOutTime"
              align = 'center'
              label="出厅时间"
              width="200">
            </el-table-column>
          </el-table>
          <!-- <div style="text-align: center;
                      height: 0px;
                      line-height: 20px;
                      font-size: 18px;">
            显示{{pager.total===0?0:(Math.ceil(pager.total/pager.pageSize)>1?((pager.currentPage-1)*pager.pageSize+1):(1))}}到{{pager.total===0?0:((Math.ceil(pager.total/pager.pageSize)===pager.currentPage)?(pager.total):(pager.currentPage*pager.pageSize))}}条
          </div> -->
          <p style="text-align: right;margin-top: 20px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pager.currentPage"
              :page-size="pager.pageSize"
              :page-sizes="[10,20,30,50]"
              background
              layout="total,sizes,prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </p>
        </el-form>
      </div>
    </div>
</template>

<script>
  import {dataFormatetmd} from '@/utils/index'
  import * as Type from '@/api/service'
  import download from "@/api/download"
    export default {
        name: "CeremonyHall",
      data(){
        return{
          loading:false,
          dictionary:[
            {label:"守灵厅",value:"wake_mourn_type"},
            {label:"告别厅",value:"farewell_mourn_type"},
          ],      //字典
          type:[],
          ruleForm: {
            "businessCode": "",
            "deadName": "",
            "businessType": "",
            "appointmentTimeStart": "",
            "appointmentTimeEnd": "",
            "pageSize": 0,
            "currentPage": 0,
            "exportExcelFlag": 0
          },
          pager:{
            "pageSize": 20,
            "total": 1,
            "currentPage": 1
          },
          tableData: [],
          tableHeight:0,
          //按钮权限
          btnRight: {
            btnCeremonyHallSearch: true, //查询
            btnCeremonyHallExport: true,//导出excel
          }
        }
      },//载入按钮
      mounted(){
        this.btnRight = this.$route.meta.buttons;
        //遍历属性赋值将true与false字符串转换成布尔型的值
        for (var key of Object.keys(this.btnRight)) {
          this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
        }
        this.onSubmit()
        var that=this
        window.onresize=function() {
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          that.tableHeight =dom - search - 110
        }
      },
      //注销window.onresize事件
      destroyed(){
        window.onresize = null;
      },
      updated(){
        this.$nextTick(()=>{
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          this.tableHeight =dom - search - 110
        })
      },
      methods:{
        onSubmit(value){
          this.loading=true
          if (value) {
            this.pager.currentPage = 1;
          }
          var postData = {
            "businessCode": this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "businessType": this.ruleForm.businessType,
            "appointmentTimeStart": dataFormatetmd(new Date(this.ruleForm.appointmentTimeStart)),
            "appointmentTimeEnd": dataFormatetmd(new Date(this.ruleForm.appointmentTimeEnd)),
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 0,            //表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          if (this.ruleForm.businessType == 0) {
            postData.businessType=null
          }
          //查询接口
          Type['loadMournCeremony'](postData).then(response => {
            const { data }=response;
            if (!data) {
              this.loading = false;
              this.$message('数据读取失败')
              return
            }
            this.tableData = data.list
            this.pager = data.pager
            this.loading=false
            //   //数据读取成功
          }).catch(error => {
            this.$message(error)
            this.loading=false
            this.tableData = []
          })
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pager.pageSize = size;
          this.onSubmit()
        },
        handleCurrentChange: function(currentPage){
          this.pager.currentPage = currentPage;
          this.onSubmit()  //点击第几页
        },
        openExecl(){
          // window.location.href = "excel地址"
          var postData = {
            "businessCode": this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "businessType": this.ruleForm.businessType,
            "appointmentTimeStart": dataFormatetmd(new Date(this.ruleForm.appointmentTimeStart)),
            "appointmentTimeEnd": dataFormatetmd(new Date(this.ruleForm.appointmentTimeEnd)),
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 1,            //0表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          // //查询火化档案的接口
          download.exportExcel(Type["MournCeremonyEXPEXC"],postData,"礼厅业务_"+download.getDateTime()+".xlsx");
        },
      }
    }
</script>

<style scoped>

  .w150{
    width:150px;
  }
</style>
